<template>
  <div class="user_webapp_register_container">
    <div class="login">
      <h1>知识渔社区</h1>
      <!-- 密码登录 -->
      <div class="login_container">
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>用</span>
              <span>户</span>
              <span>名</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input
              type="text"
              v-model="login.nickname"
              placeholder="用户名长度在1-12个字符"
            />
          </div>
        </div>
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>密</span>
              <span>码</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input
              :type="toggle.showWord ? 'input' : 'password'"
              v-model="login.password"
              placeholder="6-20位字母数字组合"
            />
          </div>
          <div class="operation" style="text-align: right; padding-right: 4px">
            <a href="javascript:;">
              <i
                @click="toggleModule"
                class="iconfont"
                :class="toggle.showWord ? 'icon-yanjing' : 'icon-yanjing1'"
              ></i>
            </a>
          </div>
        </div>
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>邮</span>
              <span>箱</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input type="email" v-model="login.email" placeholder="邮箱账号" />
          </div>
          <div class="operation" style="padding-right: 2px">
            <a
              href="javascript:;"
              @click="sendEmailCode"
              ref="selfCode"
              :style="
                toggle.sendCode
                  ? 'color: #999; cursor: not-allowed !important;'
                  : ''
              "
              >{{ toggle.sendCode ? toggle.time : "发送验证码" }}</a
            >
          </div>
        </div>
        <div class="login_item">
          <div class="login_item_start">
            <div class="login_item_start_name">
              <span>验</span>
              <span>证</span>
              <span>码</span>
            </div>
            <div class="login_item_start_gang"></div>
          </div>
          <div class="login_item_end">
            <input
              type="input"
              maxlength="6"
              v-model="login.code"
              placeholder="邮箱验证码"
            />
          </div>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div class="login_tools">
        <div class="login_tools_button">
          <button
            class="login_tools_btn"
            @click="register"
            :style="registerBtn ? 'background: #33d0b9;' : ''"
          >
            注册
          </button>
        </div>
        <div
          class="login_tools_title"
          @click="$router.replace('/user/mobileLogin')"
        >
          已有账号？去登录
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="webapp_footer">
      <!-- 用户协议请求 -->
      <div class="tcp_box">
        <input type="checkbox" name="" id="tcp" v-model="tcp" />
        <div class="tcp">
          我已阅读并同意<a href="javascript:;">《知识渔用户协议》</a>和<a
            href="javascript:;"
            >《隐私协议》</a
          >
        </div>
      </div>
      <span>如遇登录问题请加官方 QQ 群 247275373</span>
    </div>
  </div>
</template>

<script>
import { throttle } from "lodash";
import { mapState } from "vuex";
import { Loading } from "element-ui";
import { uuid } from "@/utils/uuid";
import dayjs from "dayjs";
import { mobile_register_validator } from "@/utils/validate";

export default {
  name: "MobileLogin",
  computed: {
    ...mapState("user", ["aimUserInfo", "userInfo"]),
  },
  data() {
    return {
      // 阅读同意
      tcp: false,
      // 切换合集
      toggle: {
        // 切换密码显示
        showWord: false,
        // 发送验证码
        sendCode: false,
        // 用于倒计时的验证码
        time: 59,
        // 倒计时的定时器
        timer: null,
      },
      // 登录数据
      login: {
        nickname: "",
        email: "",
        code: "",
        password: "",
      },
      // 服务loading
      loadingInstance: null,
      // 注册的loading
      registerLoading: false,
      // 是否高亮注册按钮
      registerBtn: false,
    };
  },
  watch: {
    login: {
      deep: true,
      handler() {
        let { nickname, email, code, password } = this.login;
        if (nickname && email && code && password) {
          this.registerBtn = true;
        } else {
          this.registerBtn = false;
        }
      },
    },
  },
  methods: {
    // 切换密码明文显示
    toggleModule() {
      this.toggle.showWord = !this.toggle.showWord;
    },
    // 发送验证码，节流处理
    sendEmailCode: throttle(function () {
      if (!this.login.email.trim())
        return this.$win("请先填写邮箱 😅", "error");
      // 发送了验证码后不能继续发送
      if (this.toggle.sendCode) return;
      // 开始转圈提醒用户，正在发送中
      this.loadingInstance = Loading.service({
        target: this.$refs.selfCode,
        spinner: "el-icon-loading",
      });
      // 发送验证码
      this.$api
        .sendCode(this.login.email)
        .then((res) => {
          // 以服务的方式调用的 Loading 需要异步关闭
          this.$nextTick(() => {
            this.loadingInstance.close();
          });
          if (res.code === 200) {
            this.toggle.sendCode = true;
            // 开启定时器
            this.toggle.timer = setInterval(() => {
              this.toggle.time--;
              if (this.toggle.time <= 0) {
                clearInterval(this.toggle.timer);
                this.toggle.sendCode = false;
                this.toggle.time = 59;
              }
            }, 1000);
          }
        })
        .catch(() => {
          // 以服务的方式调用的 Loading 需要异步关闭
          this.$nextTick(() => {
            this.loadingInstance.close();
          });
        });
    }, 2000),
    // 立即注册
    register: throttle(function () {
      mobile_register_validator(this.login)
        .then(() => {
          if (this.registerLoading) return;
          // 开启注册loading状态
          this.registerLoading = true;
          // 取出属性值
          let { nickname, password, email, code } = this.login;
          let uid = uuid();
          // 拼接data参数
          const data = {
            selfStr: `${uid[0]}${uid[1]}${nickname[0]}`,
            userName: nickname,
            nickName: nickname,
            password,
            email,
            code,
            user_id: uid,
            createTime: +dayjs(),
          };
          // 发送注册请求
          this.$api
            .register(data)
            .then((result) => {
              // 关闭注册loading状态
              this.registerLoading = false;
              if (result.code === 200) {
                let options = {
                  userName: nickname,
                  password,
                  loginType: "account",
                };
                // 发送请求
                this.$store.dispatch("user/Login", options).then(() => {
                  this.$win("注册成功");
                  this.$router.replace("/community/article");
                });
              }
            })
            .catch(() => {
              // 关闭注册loading状态
              this.registerLoading = false;
            });
        })
        .catch((err) => {
          this.$win(err, "error");
        });
    }, 2000),
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 350px) {
  .user_webapp_register_container {
    .login {
      padding: 80px 40px 0 40px !important;
    }
  }
}
.user_webapp_register_container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .login_tools_btn {
    transition: background 0.6s;
  }
  .login_item:nth-of-type(2) {
    .operation {
      margin-left: 12px;
    }
  }
  .login_item:nth-of-type(3) {
    .operation {
      width: 100px;
      a {
        width: 100%;
        display: inline-block;
        color: #232323;
      }
    }
  }
  .operation {
    font-size: 13px;
    line-height: 25px;
    text-align: right;
    // 出现浮入效果
    a {
      color: #232323;
    }
    .el-loading-spinner {
      right: -50px;
      width: 115px;
      top: 114%;
      background-color: #fff;
    }
    .el-icon-loading {
      font-size: 18px;
      color: var(--a-button-hover-color);
    }
  }
  .login {
    text-align: left;
    padding: 50px 20px 0 20px;
    h1 {
      margin-bottom: 50px;
    }
    .login_container {
      font-family: "微软雅黑";
      .login_item {
        display: flex;
        border-bottom: var(--main-border-bottom);
        padding-bottom: 12px;
        margin-top: 20px;
        .login_item_start {
          display: flex;
          position: relative;
          .login_item_start_name {
            display: flex;
            width: 48px;
            justify-content: space-between;
            color: #585858;
          }
          .login_item_start_gang {
            width: 2px;
            height: 8px;
            background: #c7c7c7;
            position: absolute;
            /* 水平垂直居中 */
            position: absolute;
            right: -11px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .login_item_end {
          flex: auto;
          margin-left: 18px;
          input {
            color: #232323;
            border: 0;
            width: 100%;
            background: transparent;
            outline: none;
            margin-top: -4px;
            padding-left: 8px;
            &::-webkit-input-placeholder {
              font-size: 14px;
              color: #ccc;
            }
          }
        }
      }
    }
    .login_tools {
      padding-top: 4px;
      .login_tools_name {
        display: flex;
        justify-content: flex-end;
        span {
          font-size: 14px;
          &:nth-of-type(1) {
            color: #ccc;
          }
          &:nth-of-type(2) {
            margin-left: 14px;
            color: var(--a-button-hover-color);
          }
        }
      }
      .login_tools_button {
        width: 100%;
        margin-top: 20px;
        button {
          border: 0;
          width: 100%;
          height: 40px;
          color: #fff;
          border-radius: 20px;
          background: #97cec6;
        }
      }
      .login_tools_title {
        text-align: center;
        margin-top: 20px;
        color: var(--a-button-hover-color);
      }
    }
  }
  .webapp_footer {
    font-size: 13px;
    margin-bottom: 10px;
    span {
      color: #b3b3b3;
      font-size: 12px;
    }
    .tcp_box {
      display: flex;
      margin-bottom: 4px;
      justify-content: center;
      align-items: center;
      .tcp {
        margin-left: 4px;
        color: #999;
        a {
          color: var(--a-button-hover-color);
        }
      }
    }
  }
}
</style>